<div class="content__title">
    <h1>
        Dashboard
        <small class="text-sm hidden-xs">Welcome !</small>
    </h1>
</div>
<div class="quick-menu" [class.show]="quickMenu" (click)="quickMenu=!quickMenu">
    <div class="quick-menu-inner">
        <div class="settings-ctrl">
            <i class="anticon anticon-question-circle-o"></i>
        </div>
        <div class="list-group list-group-flush">
            <a (click)="msg.info('item 1')" class="list-group-item">How do i create account?</a>
            <a (click)="msg.info('item 2')" class="list-group-item">How do i create account?</a>
            <a (click)="msg.info('item 3')" class="list-group-item">How do i create account?</a>
            <a (click)="msg.info('item 4')" class="list-group-item">How do i create account?</a>
            <a (click)="msg.info('item 5')" class="list-group-item">How do i create account?</a>
        </div>
    </div>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
            <div nz-col nzSpan="12" class="p-md text-white">
                <div class="h2 mt0">123,456</div>
                <p class="text-nowrap">Website Traffics</p>
            </div>
            <div nz-col nzSpan="12">
                <div class="text-center" [sparkline]="sparkOptions1" values="8,6,4,8,6,8,6,5,2,7,5,1"></div>
            </div>
        </div>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
            <div nz-col nzSpan="12" class="p-md text-white">
                <div class="h2 mt0">234,567K</div>
                <p class="text-nowrap">Website Impressions</p>
            </div>
            <div nz-col nzSpan="12">
                <div class="text-center" [sparkline]="sparkOptions1" values="2,3,7,8,1,4,6,3,7,2,5,3"></div>
            </div>
        </div>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
            <div nz-col nzSpan="12" class="p-md text-white">
                <div class="h2 mt0">$458,778</div>
                <p class="text-nowrap">Total Sales</p>
            </div>
            <div nz-col nzSpan="12">
                <div class="text-center" [sparkline]="sparkOptions1" values="4,7,6,2,5,3,8,1,6,4,8,6"></div>
            </div>
        </div>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md">
            <div nz-col nzSpan="12" class="p-md text-white">
                <div class="h2 mt0">456</div>
                <p class="text-nowrap">Support Tickets</p>
            </div>
            <div nz-col nzSpan="12">
                <div class="text-center" [sparkline]="sparkOptions1" values="2,3,8,2,7,1,2,5,9,3,5,6"></div>
            </div>
        </div>
    </div>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzNoHovering]="true">
            <ng-template #title>
                Sales Statistics
                <small class="text-sm font-weight-normal">Business Expectations & Retail Sales Statistics</small>
            </ng-template>
            <ng-template #body>
                <canvas baseChart
                    [datasets]="lineChartData"
                    [labels]="chartLabels"
                    [chartType]="'line'">
                </canvas>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzNoHovering]="true">
            <ng-template #title>
                Growth Rate
                <small class="text-sm font-weight-normal">Business Expectations & Retail Sales Statistics</small>
            </ng-template>
            <ng-template #body>
                <canvas baseChart
                    [datasets]="barChartData"
                    [labels]="chartLabels"
                    [chartType]="'bar'">
                </canvas>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzNoHovering]="true" class="ant-card__img">
            <ng-template #body>
                <img class="img" src="//os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png">
                <div class="p-md">
                    <h3>ANT DESIGN</h3>
                    <p class="text-grey">A UI Design Language</p>
                    <ol class="list-styled text-lg pt-md">
                        <li>Designed by experienced team, and showcase dozens of inspiring projects.</li>
                        <li>Provide solutions for usual problems that may be encountered while developing enterprise-like complex UIs.</li>
                        <li>Dozens of flexible and practical reusable components that increase your productivity.</li>
                    </ol>
                    <p class="pt-md">
                        <a class="text-grey" href="//ng.ant.design" target="_blank">View Site...</a>
                    </p>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzNoHovering]="true" class="ant-card__body-nopadding">
            <ng-template #title>
                Recent Posts
                <small class="text-sm font-weight-normal">Venenatis portauam Inceptos ameteiam</small>
            </ng-template>
            <ng-template #body>
                <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'" class="py-sm bg-grey-lighter-h point"
                    *ngFor="let item of todoData">
                    <div nz-col [nzSpan]="4" class="text-center">
                        <nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
                    </div>
                    <div nz-col [nzSpan]="20">
                        <strong>{{item.name}}</strong>
                        <p>{{item.content}}</p>
                    </div>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzNoHovering]="true" class="ant-card__body-nopadding">
            <ng-template #title>Todo lists</ng-template>
            <ng-template #body>
                <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'" class="py-sm bg-grey-lighter-h point"
                    *ngFor="let item of todoData">
                    <div nz-col [nzSpan]="4" class="text-center">
                        <nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
                    </div>
                    <div nz-col [nzSpan]="18">
                        <strong>{{item.name}}</strong>
                        <p [class.text-deleted]="item.completed">{{item.content}}</p>
                    </div>
                    <div nz-col [nzSpan]="2" class="text-right pr-md">
                        <nz-dropdown [nzPlacement]="'topRight'">
                            <i nz-dropdown class="icon-options-vertical"></i>
                            <ul nz-menu>
                                <li nz-menu-item *ngIf="item.completed" (click)="item.completed=false">Active</li>
                                <li nz-menu-item *ngIf="!item.completed" (click)="item.completed=true">Completed</li>
                                <li nz-menu-item (click)="todoData.splice(todoData.indexOf(item), 1)">Delted</li>
                            </ul>
                        </nz-dropdown>
                    </div>
                </div>
            </ng-template>
        </nz-card>
    </div>
</div>
